<template>
  <sec-dialog
    width="720px"
    top="8vh"
    :title="{ add: '新增', update: '编辑', view: '查看' }[type]"
    :visible.sync="formVisible"
    :before-close="handleDialogClose"
    custom-class="device-detail-form"
  >
    <div class="drawer-container">
      <p class="subTitle"><i class="subTitle-line"></i>基本信息</p>
      <sec-form
        ref="formRef"
        :model="form"
        class="search-bar-form search-form-50"
        label-width="100px"
        label-suffix=":"
        :rules="formRules"
        :class="{ viewForm: type === 'view' }"
        :hide-required-asterisk="type === 'view'"
      >
        <sec-form-item label="账号" prop="username">
          <sec-input
            v-model="form.username"
            size="medium"
            placeholder=""
            :disabled="type === 'update'"
          ></sec-input>
        </sec-form-item>
        <sec-form-item
          v-if="type == 'add'"
          label="密码"
          prop="password"
          :style="{ marginBottom: errmessageShow ? '40px' : '0px' }"
        >
          <sec-input
            v-model="form.password"
            type="password"
            size="medium"
            placeholder=""
          ></sec-input>
        </sec-form-item>
        <sec-form-item label="姓名" prop="nickName">
          <sec-input
            v-model="form.nickName"
            size="medium"
            placeholder=""
          ></sec-input>
        </sec-form-item>
        <sec-form-item label="手机号" prop="phone">
          <sec-input
            v-model="form.phone"
            size="medium"
            placeholder=""
          ></sec-input>
        </sec-form-item>
        <sec-form-item label="邮箱" prop="email">
          <sec-input
            v-model="form.email"
            size="medium"
            placeholder=""
          ></sec-input>
        </sec-form-item>
        <sec-form-item label="角色" prop="role">
          <sec-select
            v-model="form.role"
            multiple
            collapse-tags
            placeholder="请选择"
            :disabled="type === 'update'"
            clearable
          >
            <sec-option
              v-for="val in constants.roleList"
              :key="val.roleId"
              :label="val.roleName"
              :value="val.roleId"
            ></sec-option>
          </sec-select>
        </sec-form-item>
      </sec-form>
      <span v-show="type !== 'view'" slot="footer" class="dialog-footer">
        <sec-button @click="handleDialogClose">取 消</sec-button>
        <sec-button type="primary" @click="submit">确 定</sec-button>
      </span>
    </div>
  </sec-dialog>
</template>

<script>
import http from '@/utils/http'
import Valid from './PasswordValid'
// import { generateEntype } from '@/utils/util'
import { Base64 } from 'js-base64'

export default {
  name: 'DeviceDetailForm',
  components: {},
  props: {
    formVisible: {
      type: Boolean,
      default: false
    },
    constants: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        Valid(rule, value)
          .then(() => {
            this.errmessageShow = false
            callback()
          })
          .catch((e) => {
            if (e.message.length > 20) {
              this.errmessageShow = true
            } else {
              this.errmessageShow = false
            }
            callback(e)
          })
      }
    }
    return {
      userId: -1,
      form: {
        username: '',
        nickName: '',
        email: '',
        password: '',
        phone: '',
        role: []
      },
      errmessageShow: false,
      formRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ],
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { validator: validatePass, trigger: ['blur'] }
        ],
        phone: [
          {
            required: true,
            pattern: /^1([0-9][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }]
      }
    }
  },
  watch: {
    formVisible(val) {
      if (this.type !== 'add' && val) {
        this.userId = this.rowData.userId
        this.form = {
          ...this.rowData,
          role: this.rowData.roleList.map((item) => item.roleId)
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleDialogClose() {
      this.userId = -1
      this.form = {
        username: '',
        nickName: '',
        email: '',
        password: '',
        phone: '',
        role: []
      }
      this.errmessageShow = false
      this.$refs['formRef'].resetFields()
      this.$emit('closeDetailForm')
    },
    submit() {
      if (this.type === 'add') {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            http
              .accountSave({
                ...this.form,
                password: Base64.encode(this.form.password)
              })
              .then((res) => {
                if (res.code !== '200') {
                  this.handleDialogClose()
                  return
                }
                this.$message.success('新增成功')
                this.$emit('updateList')
                this.handleDialogClose()
              })
          }
        })
      } else if (this.type === 'update') {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            http
              .accountUpdate({
                ...this.form
              })
              .then((res) => {
                if (res.code !== '200') {
                  this.handleDialogClose()
                  return
                }
                this.$message.success('修改成功')
                this.$emit('updateList')
                this.handleDialogClose()
              })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scope>
.drawer-container {
  min-height: 300px;
  height: 100%;
  position: relative;
}
.viewForm {
  .el-input__inner {
    border: none;
  }
  .el-input__suffix {
    display: none;
  }
  pointer-events: none;
}
.drawer-detail-form .search-bar-form {
  padding: 16px 16px 0px 16px;
  .el-form-item {
    margin-bottom: 24px;
  }
}
.checkTable {
  display: none;
  margin: 16px;
  width: calc(100% - 32px);
  .cell {
    height: 26px;
  }
  .el-table__header {
    .el-table__cell:nth-child(1) {
      border-right: 1px solid #ebeef5;
    }
  }
  .el-checkbox {
    margin-right: 16px;
  }
  .notice-img {
    .el-checkbox__input {
      display: none;
    }
    .el-checkbox__label {
      padding-left: 0px;
    }
    img {
      width: 26px;
      height: 26px;
    }
  }
  &.viewForm {
    .notice-img {
      opacity: 0.5;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #262626;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: transparent;
      border-color: #d9d9d9;
      &:after {
        border-color: #d9d9d9;
      }
      &::before {
        background-color: #d9d9d9;
      }
    }
  }
}
.dialog-footer {
  width: 100%;
  text-align: right;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 16px;
  border-top: 1px solid #f0f0f0;
}
.subTitle {
  margin: 0 16px 16px;
  padding-left: 8px;
  display: block;
  // border-left:3px solid #3366FF;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  height: 16px;
  line-height: 16px;
  color: #262626;
  position: relative;
}
.subTitle-line {
  display: inline-block;
  border-radius: 2px;
  width: 3px;
  height: 16px;
  background: #3366ff;
  position: absolute;
  left: 0;
}
</style>
